import { useCallback, useMemo, useState } from 'react'
import './index.scss'
import { Button, Checkbox, CheckboxProps, Form, Input } from 'antd'
import { UserInfo } from './interface'
import loginAPI from './api'
import { debounce } from 'lodash'
import cookie from 'react-cookies'
import { useMessageApi } from '@/component/context/messageContext/message'
import { useNavigate } from 'react-router-dom'
import Logo from '@/component/common/logo/Logo'
import logoPng from '@/assets/iamges/cat.png'

function Login() {
  const [userInfo, setUserInfo] = useState<UserInfo>({
    phone: '',
    password: '',
  })
  const [isAgree, setIsAgree] = useState<Boolean>(false)
  const messageApi = useMessageApi()
  const navigate = useNavigate()
  const userLogin = useCallback(
    debounce(() => {
      if (!isAgree) {
        messageApi.error('请同意服务协议')
        return
      }
      loginAPI.userLogin(userInfo).then((data) => {
        if (data) {
          messageApi.success('登录成功')
          cookie.save('token', `${data}`, { path: '/' })
          navigate('/home', { replace: true })
        }
      })
    }, 200),
    [userInfo, isAgree]
  )

  const onChange: CheckboxProps['onChange'] = (e) => {
    setIsAgree(e.target.checked)
  }

  const LoginForm = useMemo(() => {
    return (
      <Form className="login-form" onFinish={userLogin}>
        <Form.Item
          name="phone"
          rules={[
            {
              required: true,
              message: '请输入手机号',
              validateTrigger: ['onChange', 'onBlur'],
            },
          ]}>
          <Input
            allowClear
            value={userInfo.phone}
            placeholder="手机号 / 邮箱"
            onChange={(e) => {
              setUserInfo({ ...userInfo, phone: e.target.value })
            }}
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: '请输入密码',
              min: 8,
              max: 20,
              validateTrigger: ['onChange', 'onBlur'],
            },
          ]}>
          <Input.Password
            type="password"
            allowClear
            value={userInfo.password}
            placeholder="密码"
            onChange={(e) => {
              setUserInfo({ ...userInfo, password: e.target.value })
            }}
          />
        </Form.Item>
        <Form.Item>
          <Checkbox className="text" onChange={onChange}>
            同意协议
          </Checkbox>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-btn">
            登录
          </Button>
        </Form.Item>
      </Form>
    )
  }, [userLogin, userInfo])

  return (
    <div className="login">
      <div className="left">
        <div className="logo-img-box">
          <img className="img1" src={logoPng} alt="" />
          <img className="img2" src={logoPng} alt="" />
        </div>
      </div>
      <div className="right">
        <div className="logo">
          <Logo width={50} margin={'20px 0'}></Logo>
        </div>
        {LoginForm}
      </div>
    </div>
  )
}

export default Login
